import styles from './index.less';
import { useState, useEffect } from 'react';
import { history, Link, useIntl } from 'umi';
import {
  Button,
  Table,
  Radio,
  Divider,
  Space,
  Modal,
  Input,
  message,
  Popconfirm,
} from 'antd';
import request from '@/utils/request';
import NoDataExplain from './components/explain';
import { leadStagefn, leadSourcefn, priorityfn } from '@/data/options';

const RosterPage = function () {
  const intl = useIntl();

  const columns = [
    {
      title: intl.formatMessage({ id: 'name' }),
      dataIndex: 'rosterName',
      render: (text: string, record: any) => (
        <Link to={`/roster/${record.id}`}>{text}</Link>
      ),
    },
    {
      title: intl.formatMessage({ id: 'contactsnumber' }),
      dataIndex: 'totalPeople',
    },
    {
      title: intl.formatMessage({ id: 'user' }),
      dataIndex: 'source',
      // render: (text: string) => <a>{text}</a>,
    },
    {
      title: intl.formatMessage({ id: 'createDate' }),
      dataIndex: 'createdDate',
    },
  ];

  interface DataType {
    id: number;
    rosterName: string;
  }

  const [rowSelected, setRowSelected] = useState([]);

  // rowSelection object indicates the need for row selection
  const rowSelection = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
      console.log(
        `selectedRowKeys: ${selectedRowKeys}`,
        'selectedRows: ',
        selectedRows,
      );
      setRowSelected(selectedRows);
    },
  };

  const onExport = () => {
    console.log('汇入');
  };

  const [createVisible, setCreateVisible] = useState(false);
  const [createName, setCreateName] = useState('');
  const [rosterList, setRosterList] = useState([]);

  const getList = () => {
    request.get('/roster/get').then((res) => {
      setRosterList(res.data.rosterList || []);
    });
  };

  useEffect(() => {
    getList();
  }, []);

  const showModal = () => {
    setCreateVisible(true);
  };

  const handleOk = () => {
    if (createName) {
      request
        .post('/roster/create', { rosterName: createName })
        .then((res) => {
          getList();
          setCreateVisible(false);
          setCreateName('');
          const { id } = res.data.roster;
          history.push('/roster/' + id);
        })
        .catch((err) => {
          message.error(err.message);
        });
    }
  };

  const handleCancel = () => {
    setCreateVisible(false);
  };

  const onChangeCreateName = (e: any) => {
    const { value } = e.target;
    setCreateName(value);
  };
  // 删除名单
  const onRemove = () => {
    const data = rowSelected.map((n) => n.id);
    request.post(`/roster/del`, data).then((res) => {
      message.success(intl.formatMessage({ id: 'removesuccess' }));
      getList();
    });
  };

  return (
    <div className={styles.rosterContainer}>
      <div className={styles.ccHead}>
        <div className={styles.ccHeadTitle}>
          {intl.formatMessage({ id: 'roster' })}
        </div>
        {rowSelected.length ? (
          <Space>
            {/* <Button onClick={onExport}>
              {intl.formatMessage({ id: 'import' })}
            </Button> */}
            <Popconfirm
              placement="bottomRight"
              title={intl.formatMessage({ id: 'RU_deleteroster' })}
              onConfirm={onRemove}
              okText={intl.formatMessage({ id: 'yes' })}
              cancelText={intl.formatMessage({ id: 'no' })}
            >
              <Button type="link">
                {intl.formatMessage({ id: 'remove' })}
              </Button>
            </Popconfirm>
          </Space>
        ) : (
          <Space>
            {/* <Button onClick={onExport}>
              {intl.formatMessage({ id: 'import' })}
            </Button> */}
            <Button type="primary" onClick={showModal}>
              {intl.formatMessage({ id: 'create' })}
            </Button>
          </Space>
        )}
      </div>
      <Table
        className="nodatanoshow"
        rowSelection={{
          type: 'checkbox',
          ...rowSelection,
        }}
        rowKey="id"
        columns={columns}
        dataSource={rosterList}
        scroll={{ x: '100%' }}
        style={{ margin: '20px 20px 0' }}
        pagination={{
          showTotal: (total) =>
            `${intl.formatMessage({ id: 'total' })}: ${total}`,
        }}
      />
      {!rosterList.length ? <NoDataExplain oncreate={showModal} /> : ''}

      <Modal
        title={intl.formatMessage({ id: 'createroster' })}
        visible={createVisible}
        onOk={handleOk}
        onCancel={handleCancel}
        okText={intl.formatMessage({ id: 'create' })}
        cancelText={intl.formatMessage({ id: 'cancel' })}
      >
        <Input
          placeholder={intl.formatMessage({ id: 'p_u_therostername' })}
          value={createName}
          onChange={onChangeCreateName}
        ></Input>
      </Modal>
    </div>
  );
};

RosterPage.title = '名单';

export default RosterPage;
